<template>

    <div class="">
        <div class="">
            <div>
                <div class="__8d_Ftpyz">
                    <div class="QSeUvD5b">
                        <div class="__5lbPL2fx">
                            <div class="PCV2xUpe">
                                <div class="TnEmXxsJ">
                                    <div class="xXf5xsa5">库漫空间</div>
                                    <div class="waxjTK_y xXf5xsa5">企业授权定制</div>
                                </div>
                                <div class="__7iNBg0X3">
                                    <div class="ofg273DE">
                                        <img :src="siteConf.subscribe.small_img"
                                            alt="">
                                        <div class="KTA4S7MT">大量高清图片供给</div>
                                    </div>
                                    <div class="ofg273DE">
                                        <img :src="siteConf.subscribe.small_img"
                                        alt="">
                                        <div class="KTA4S7MT">正版商业授权</div>
                                    </div>
                                    <div class="ofg273DE">
                                        <img :src="siteConf.subscribe.small_img"
                                            alt="">
                                        <div class="KTA4S7MT">多场景覆盖</div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="__9PROi_ui">
                        <div class="T0YeNES7" :style="{ background: `url(${siteConf.subscribe.bg_img})`, backgroundRepeat: 'no-repeat', backgroundSize:'100%'}">
                            <div class="DlirJ1ib public_css">
                                <div class="__5tHOmji1" v-for="(item, index) in subscribeListData" :key="index">

                                    <div>
                                        <div class="X20EtzrE">{{ item.title || '' }}</div>
                                        <div class="Ml_1CMnv">{{ item.subtitle || '' }}</div>
                                        <div class="P3IJ_Ps1"
                                            @click="item.type == 0 ? immediatelyCustomize(item) : subscribeClick(item)">
                                            <span>{{ item.type == 0 ? '立即定制' : '立即订阅' }}</span>
                                        </div>
                                        <div class="d1xY_zWD">
                                            <div class="dOLnFV6B"
                                                v-for="(content, c_index) in item.subscribe_json_content"
                                                :key="c_index"><img
                                                    :src="siteConf.subscribe.auth_small_img"
                                                    alt="" width="20">{{ content.value }}</div>

                                        </div>
                                    </div>

                                </div>
                            </div>
                        </div>

                    </div>

                </div>
            </div>
        </div>
    </div>
    <div class="eKPpmK85 public_css">
        <div class="fLE_iyzU">
            <header>
                <div class="dQZ1bQM4">常见问题</div>
            </header>
        </div>
        <div class="eKPpmK85_content">
            <el-collapse accordion>
                <el-collapse-item :title="item.title" :name="index" v-for="(item, index) in askedQuestionData">
                    <div v-html="item.text"></div>
                </el-collapse-item>
            </el-collapse>
        </div>
    </div>
    <!-- 定制弹窗 -->
    <div>
        <el-dialog v-model="dialogVisible" class="dzdialogVisible" :close-on-press-escape="false" width="889" :close-on-click-modal="false"
            append-to-body align-center modal-class="overlay-modal" style="border-radius: 16px !important;background: #1a1a1a !important;">
            <div class="rgkLEA2W">
                <div class="XTjN43Yt">
                    <div class="e46WNgqp">
                        <div class="Kry8SuEM" style="color: #fff;">添加微信，立即线上沟通</div>
                        <div class="n6yPVLbf"><img
                                :src="siteConf.subscribe.contact_ewm"
                                alt="二维码"></div>
                        <div class="D1plM_Ix" style="color: #fff;">无需加好友，聊完即删<br>(我们看不到您的朋友圈等个人信息)</div>
                        <!-- <div class="BUB79uwl" data-gd-click="button_click" data-button-name="售后咨询"><span role="img"
                                class="anticon QaBLSkFR"><svg width="1em" height="1em" fill="currentColor"
                                    aria-hidden="true" focusable="false" class="">
                                    <use xlink:href="#ic_severice"></use>
                                </svg></span>我已购买, 咨询售后</div> -->
                    </div>
                </div>
                <div class="XTjN43Yt">
                    <div class="XkQsGOQO">
                        <div class="Kry8SuEM" style="color: #fff;">预留信息,我们将在1～2个工作日联系您</div>
                        <el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" style="max-width: 600px; color: #e85623;"
                            label-width="auto" class="lMY5rscV" label-position="top" >
                            <el-form-item  label="公司名称" prop="company">
                                <el-input v-model="ruleForm.company"    :name="randomName"
                                :autocomplete="'off'"  />
                            </el-form-item>
                            <el-form-item label="预计每年的下载量" prop="resource">
                                <el-radio-group v-model="ruleForm.resource">
                                    <el-radio value="100以下" size="large" border>100以下</el-radio>
                                    <el-radio value="100～500个" size="large" border>100～500个</el-radio>
                                    <el-radio value="500～3000个" size="large" border>500～3000个</el-radio>
                                    <el-radio value="3000个以上" size="large" border>3000个以上</el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="联系人" prop="name">
                                <el-input v-model="ruleForm.name" autocomplete="off"  name="name" id="name"  />
                            </el-form-item>
                            <el-form-item label="联系人电话" prop="mobile">
                                <el-input v-model="ruleForm.mobile" autocomplete="off" name="mobile" id="mobile"  />
                            </el-form-item>
                            <el-form-item>
                                <div class="M7LdnvD7">
                                    <el-button class="Bi65U_Zw" type="primary" @click="submitForm(ruleFormRef)">
                                        确认提交
                                    </el-button>
                                </div>
                            </el-form-item>
                        </el-form>
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
    <!-- 订阅弹窗 -->
    <div>
        <el-dialog v-model="subscribeDialogVisible" :close-on-press-escape="false" :close-on-click-modal="false"
            width="890" append-to-body align-center modal-class="overlay-modal" style="border-radius: 16px !important; background: #1a1a1a !important;"
            @close="closeDialog">
            <div class="rgkLEA2W">
                <div class="XTjN43Yt">
                    <div class="e46WNgqp">
                        <div class="Kry8SuEM" style="color:#fff">添加微信，立即线上沟通</div>
                        <div class="n6yPVLbf"><img
                                  :src="siteConf.subscribe.contact_ewm"
                                alt="二维码"></div>
                        <div class="D1plM_Ix" style="color:#fff">无需加好友，聊完即删<br>(我们看不到您的朋友圈等个人信息)</div>
                        <!-- <div class="BUB79uwl" data-gd-click="button_click" data-button-name="售后咨询"><span role="img"
                                class="anticon QaBLSkFR"><svg width="1em" height="1em" fill="currentColor"
                                    aria-hidden="true" focusable="false" class="">
                                    <use xlink:href="#ic_severice"></use>
                                </svg></span>我已购买, 咨询售后</div> -->
                    </div>
                </div>
                <div class="XTjN43Yt">
                    <div class="XkQsGOQO1">
                        <div class="Kry8SuEM" style="font-size: 26px;color:#fff;">KM专享版</div>
                        <div style="padding: 20px;">
                            <div class="lMY5rscV"
                                style="text-align: left;color: #fff;font-size: 26px;font-weight: 600;text-wrap: nowrap;">
                                订单确认
                            </div>
                            <div style="margin-top: 20px;" class="jjj">
                                <el-table  :data="tableData" class="custom-background-table" border style="width: 100%;background-color: #1a1a1a !important;"
                                    :cell-style="{ textAlign: 'center' }"
                                    :header-cell-style="{ 'text-align': 'center' }">
                                    <el-table-column prop="title" label="名称" />
                                    <el-table-column prop="detail" label="详情" />
                                    <el-table-column prop="price" label="价格">
                                        <template #default="scope">
                                            <div>￥{{ scope.row.price }}元/年</div>
                                        </template>
                                    </el-table-column>
                                </el-table>
                                <div style="margin-top: 20px; text-align: right;">总计 <span
                                        style="color: #e85623; font-size: 20px; font-weight: bold;">￥{{ priceSum ||
                                            0 }}元/年</span>
                                </div>
                                <div
                                    style="display: flex;justify-content:center; margin-top: 20px;align-items: center;">
                                    <span style="width:10%;">手机号:</span><el-input v-model="userMobile"
                                        :disabled="userMobileDisabled" placeholder="请填写您的手机号" clearable @blur="userBlur"
                                        @clear="userClear" />
                                </div>
                                <div style="display: flex;justify-content:center;align-items: center;">
                                    <el-text type="danger">{{ errorMessage }}</el-text>
                                </div>
                                <div style="display: flex;justify-content: space-between; margin-top: 20px;">
                                    <div style="text-align: left;">
                                        <el-checkbox v-model="isShowPay" label="请先阅读《KM专享版会员订购规则》" size="large"
                                            @change="changePay" :disabled="checkDisabled" />
                                        <div
                                            style="line-height: 20px; font-size: 12px; margin-left: 22px;     cursor: pointer;">
                                            <div>购天后向务服申请规载码发录后方可进行使用</div>
                                            <div>权益于订阅后开启使用</div>
                                            <div>订阅后不可取消退款</div>
                                            <div>支付即视为你同意<span style="margin: 0 5px;color: #e85623;"
                                                    @click="ruleClick">订购规则</span>条例</div>
                                        </div>
                                    </div>
                                    <div :style="isShowPay ? 'display: block;' : 'display: none;'">
                                        <el-tabs v-model="activeId" tab-position="left" @tab-change="handleChange">
                                            <el-tab-pane label="微信支付" name=1>
                                                <div
                                                    style="border: 1px solid #ebeef5; padding:2px;width: 130px;height: 130px;">
                                                    <img :src="payArr" style="width: 130px;height: 130px;" />

                                                </div>
                                            </el-tab-pane>
                                            <el-tab-pane label="支付宝支付" name=2>
                                                <div style="border: 1px solid #ebeef5; padding:2px;">
                                                    <img :src="payArr" style="width: 130px;height: 130px;" />
                                                </div>
                                            </el-tab-pane>

                                            <div class="icon-pay-loadding" v-if="isLoading">
                                                <span></span><em>正在加载...</em>
                                            </div>
                                            <div class="icon-expire-pay" v-if="isRefresh" @click="refreshPay">
                                                <i></i><span>二维码已超时<br />请刷新</span>
                                            </div>
                                        </el-tabs>
                                    </div>

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>

    <!-- 消息弹窗 -->
    <div>
        <el-dialog v-model="msgDialogVisible" class="msgDialogVisible" :close-on-press-escape="false" :close-on-click-modal="false" width="600"
            append-to-body align-center modal-class="overlay-modal" style="border-radius: 16px !important;background: #1a1a1a !important;"
            @close="msgCloseDialog">
            <div class="rgkLEA2WMSG">
                <div class="XTjN43Yt" style="width: 100%;">
                    <div class="e46WNgqp" style="background: #1a1a1a !important;">
                        <div class="Kry8SuEM"  style="color: #f7e399 !important;">订单信息确认</div>
                        <div class="n6yPVLbf"><img  :src="siteConf.subscribe.msg_img" alt="order" style="border-radius: 6px;"></div>
                        <div class="D1plM_Ix" style="line-height: 50px;text-align: left;font-size:22px; color: #f7e399;">
                            <div>您的订单号:{{ order_no || '20241127165958702441524687799622' }}</div>
                            <div>您的手机号:{{ userMobile || 0 }}</div>
                            <div>您的付款金额:{{ priceSum || 8000 }}</div>
                        </div>
                        <div class="BUB79uwl" @click="openDwwn" style="font-size:22px;font-weight: bold;color: #f7e399; display: flex;justify-content: center;">
                            <div style="border: 1px solid #e85623; padding: 0 20px; border-radius: 6px;"><span role="img"
                                class="anticon QaBLSkFR"><el-icon size="22px">
                                    <SvgIcon iconName="icon-rengongkefu" />
                                </el-icon></span>我已购买, 咨询售后</div></div>
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
    <!-- <div class="public_css">
        <footerContent></footerContent>
    </div> -->
    <div style="height: 200px;"></div>

</template>
<script setup lang="ts">
import { onMounted, reactive, ref } from "vue";
import { FormInstance, FormRules, ElMessage, ElLoading, TabPaneName } from 'element-plus'
import footerContent from "../../components/footerContent.vue";
import { askedQuestion, saveCustomer, subscribeList } from "../../api/product";
import { checkPay, subscribeCreateOrder, doPayment } from "../../api/pay";
import { useSiteConfig } from '../../stores/siteConfig'

const siteConf = useSiteConfig()
const dialogVisible = ref(false)
const subscribeDialogVisible = ref(false)
const userMobileDisabled = ref(false)
const msgDialogVisible = ref(false)
const userMobile = ref('')
const errorMessage = ref('')
const isLoading = ref(true); //加载
const isRefresh = ref(false);
//刷新二维码
const refreshPay = () => {
    isRefresh.value = false;

};

const randomName =  `input_${Math.random().toString(36).substr(2, 9)}`;
// 自定义验证规则
const validatePhoneNumber = (rule: any, value: any, callback: any) => {
    const phoneRegex = /^(1[3-9]\d{9})$|^(0\d{2,3}-?\d{7,8})$/;
    if (value === '') {
        callback(new Error('请输入手机号或固定电话号码'));
    } else if (!phoneRegex.test(value)) {
        callback(new Error('请输入正确的手机号或固定电话号码，例如：13x12345678或05xx-82xxxxxx'));
    } else {
        callback();
    }
};


const ruleFormRef = ref<FormInstance>()
interface RuleForm {
    subscribe_id: number,
    company: string,
    name: string,
    mobile: string,
    resource: string,
    type:number,
}
const ruleForm = reactive<RuleForm>({
    subscribe_id: 0,
    company: '',
    name: '',
    mobile: '',
    resource: '',
    type:0
})

const rules = reactive<FormRules<RuleForm>>({
    company: [
        { required: true, message: '请输入公司名称', trigger: 'blur' },
    ],
    name: [
        { required: true, message: '请输入联系人', trigger: 'blur' },
    ],
    mobile: [
        { required: true, validator: validatePhoneNumber, trigger: 'blur' }
    ],
    resource: [
        {
            required: true,
            message: '请选择预计每年下载量',
            trigger: 'change',
        },
    ],
})
const submitForm = async (formEl: FormInstance | undefined) => {
    if (!formEl) return
    await formEl.validate((valid, fields) => {
        if (valid) {
            const loading = ElLoading.service({
                lock: true,
                text: '请稍等,正在提交...',
                background: 'rgba(0, 0, 0, 0.7)',
            })
            saveCustomer(ruleForm).then((res: any) => {
                if (res.code == 1) {
                    ElMessage.success(res.msg);
                    dialogVisible.value = false
                }
            }).catch((err: any) => {
                ElMessage.error(err.msg);
                console.log(err)
            }).finally(() => {
                loading.close()
            })
        } else {
            ElMessage.error("请完善申请资料");
        }
    })
}


//数据源读取
const subscribeListData = ref<any>([]);
const subscribeListInfo = () => {
    subscribeList({}).then((res: any) => {
        if (res.code == 1) {
            subscribeListData.value = res.data.list
        }
    }).catch((err: any) => {
        console.log(err)
    })
}
document.body.classList.remove('no-scroll');
//获取常见问题
const askedQuestionData = ref<any>([]);
askedQuestion({ q_type: 0 }).then((res: any) => {
    if (res.code == 1) {
        askedQuestionData.value = res.data
    }
}).catch((err) => {
    console.log(err)
})
//立即定制
const immediatelyCustomize = (item: any) => {
    ruleForm.subscribe_id = item.id
    dialogVisible.value = true
}

//立即订阅
const tableData = ref<any>([]);
const priceSum = ref(0)
const subscribeClick = (item: any) => {
    let list = [{ title: item.title, detail: '按年订阅', price: item.moeny }];
    tableData.value = list;
    priceSum.value = item.moeny
    createOrderData.subscribe_id = item.id
    createOrderData.pay_price = item.moeny
    userMobile.value = '';
    errorMessage.value = '';
    subscribeDialogVisible.value = true
}
//协议规则
const ruleClick = () => {
    window.open('/agreement')
}
const activeId = ref('1')
const pay_str = ref('微信支付')
const handleChange = (name: any) => {
    //停止轮询上个的
    stopPolling();
    activeId.value = name
    createOrderData.pay_type = parseInt(name)
    createOrderData.pay_str = parseInt(activeId.value) == 1 ? '微信支付' : '支付宝支付'
    createOrderData.remark = parseInt(activeId.value) == 1 ? '微信支付订阅充值' : '支付宝支付订阅充值'
    createOrderInfo(createOrderData)
}

//订单接口
interface orderItemForm {
    pay_price: number;
    subscribe_id: number,
    pay_type: number;
    recharge_type: number;
    vip_type: number;
    remark: string;
    pay_str: string;
}
//订单信息初始化
const createOrderData = reactive<orderItemForm>({
    pay_price: 0,//支付价格
    subscribe_id: 0, //订阅id
    pay_type: parseInt(activeId.value), //支付类型
    recharge_type: 3, //订阅
    vip_type: 0,
    remark: pay_str.value + '订阅充值',
    pay_str: pay_str.value,
});
const checkDisabled = ref(true)
//处理订单
const isShowPay = ref(false)
//请先阅读
const changePay = (e: any) => {
    isShowPay.value = e
    createOrderInfo(createOrderData)
}
//用户订阅保存客户信息
const saveCustomerFun = () => {
    saveCustomer({ subscribe_id: createOrderData.subscribe_id, company: '用户订阅', name: '用户订阅', mobile: userMobile.value, resource: '用户订阅', order_sn: order_no.value,type:1 }).then((res: any) => {
        if (res.code == 1) {
            paymentFun()
        }
    }).catch((err: any) => {
        ElMessage.error(err.msg);
    })
}
//创建订单
const order_no = ref("");
const createOrderInfo = (createOrderData: any) => {
    const loading = ElLoading.service({
        lock: true,
        text: '请稍等,正在处理...',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    subscribeCreateOrder({ createOrderData: createOrderData })
        .then((res: any) => {
            if (res.code == 1) {
                order_no.value = res.data.order_no;
                saveCustomerFun()
            }
        })
        .catch((error: any) => {
            ElMessage.error(error.msg)
        }).finally(() => {
            loading.close()
        });
};
const payArr = ref<any>([]);
//支付二维码
const paymentFun = () => {
    isLoading.value = true;
    doPayment({ order_sn: order_no.value, tab: activeId.value })
        .then((res: any) => {
            if (res.code == 1) {
                payArr.value = res.data;
                userMobileDisabled.value = true
                isLoading.value = false;
                startPolling(); //轮询
            }
        })
        .catch((error) => {
            ElMessage.error("其他错误" + error);
        });
};
//检查订单是否支付
const check_pay = async () => {
    try {
        // 获取下载的url  
        const res: any = await checkPay({ order_no: order_no.value });
        if (res.code === 1) {
            //停止轮询
            stopPolling();
            subscribeDialogVisible.value = false;
            msgDialogVisible.value = true
        }
    } catch (error: any) {
        if (error.code == 203) {
            isRefresh.value = true;
            //停止轮询
            stopPolling();
        }
    }
}

//轮询
const intervalId = ref<number | null>(null);
const startPolling = () => {
    if (intervalId.value !== null) return;
    intervalId.value = window.setInterval(check_pay, 3000); // 每1秒轮询一次
};

//停止轮询
const stopPolling = () => {
    if (intervalId.value !== null) {
        window.clearInterval(intervalId.value);
        intervalId.value = null;
    }
};

//验证用户输入的手机号
const userBlur = () => {
    const phoneRegex = /^(1[3-9]\d{9})$|^(0\d{2,3}-?\d{7,8})$/;
    if (!phoneRegex.test(userMobile.value)) {
        errorMessage.value = '请输入正确的手机号或固定电话号码，例如：13x12345678或05xx-82xxxxxx';
        checkDisabled.value = true
        isShowPay.value = false
        return
    } else {
        checkDisabled.value = false
        errorMessage.value = '';
        return
    }
}
//清空用户手机号输入框
const userClear = () => {
    checkDisabled.value = true
    errorMessage.value = '';
    isShowPay.value = false
}
//关闭弹窗 -- 订阅
const closeDialog = () => {
    stopPolling()
    isShowPay.value = false
    subscribeDialogVisible.value = false;
};
//关闭消息弹窗
const msgCloseDialog = () => {
    msgDialogVisible.value = false;
}
//
const openDwwn = () =>{
    ElMessage.error('开通中...')
}


//初始化加载
onMounted(() => {
    subscribeListInfo()
})

</script>
<style>

body {
    background: #1a1a1a !important;
}
.msgDialogVisible .el-dialog{
    background: #1a1a1a !important;
}
.dzdialogVisible .el-dialog{
    background: #1a1a1a !important;
}
.el-radio.is-bordered.is-checked {
    border-color: #e85623 !important;
}

.el-radio__input.is-checked+.el-radio__label {
    color: #e85623 !important;
}
.el-input__wrapper{
    background-color: #1a1a1a !important;
}
.el-radio__input.is-checked .el-radio__inner {
    background: #e85623 !important;
    border-color: #e85623 !important;
}

.el-input__wrapper.is-focus {
    box-shadow: 0 0 0 1px #ee7447 !important;
}

.el-collapse {
    --el-collapse-border-color: transparent !important;
}


.icon-pay-loadding {
    width: 130px;
    height: 130px;
    position: absolute;
    left: 3px;
    bottom: 3px;
    border-radius: 0;
    background-color: #efefef;
    padding-top: 35px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}

.icon-pay-loadding span {
    background: url(https://static.3d66.com/act/images/global-act-pay/loading.png) center no-repeat;
    width: 32px;
    height: 32px;
    display: block;
    margin: 0 auto 20px;
    -webkit-animation: iconfont 1.8s linear infinite;
    animation: iconfont 1.8s linear infinite;
}

@keyframes iconfont {
    from {
        transform: rotate(0deg);
        /* 从0度开始旋转 */
    }

    to {
        transform: rotate(360deg);
        /* 旋转到360度 */
    }
}

.icon-expire-pay {
    position: absolute;
    bottom: 3px;
    left: 3px;
    border-radius: 0;
    width: 130px;
    height: 130px;
    text-align: center;
    cursor: pointer;
    background-color: rgba(0, 0, 0, 0.8);
}

.icon-expire-pay i {
    background: url(https://static.3d66.com/act/html/act-20200725/img/refresh.png) center no-repeat;
    width: 30px;
    height: 30px;
    background-size: cover;
    cursor: pointer;
    margin: 20px auto 15px;
    display: block;
    animation: iconfont 1.8s linear infinite;
}

.icon-expire-pay span {
    color: #fff;
    font-size: 12px;
    line-height: 18px;
}

.QSeUvD5b {
    width: 1296px;
    margin: 40px auto;
}

.__5lbPL2fx .PCV2xUpe .TnEmXxsJ {
    display: flex;
}

.__5lbPL2fx .PCV2xUpe .xXf5xsa5 {
    font-size: 56px;
    font-weight: 200;
    line-height: 128%;
    color: #fff;
}

.__5lbPL2fx .PCV2xUpe .waxjTK_y {
    color: #eca671;
    font-weight: 600;
    margin-bottom: 24px;
}

.__5lbPL2fx .PCV2xUpe .__7iNBg0X3 {
    /* padding-bottom: 96px; */
}

.__5lbPL2fx .PCV2xUpe .__7iNBg0X3 .ofg273DE {
    color: #1c1f23;
    display: inline-flex;
    margin-right: 21px;
    align-items: center;
    margin-bottom: 13px;
}

.__5lbPL2fx .PCV2xUpe .__7iNBg0X3 .ofg273DE img {
    width: 20px;
    height: 20px;
    margin-right: 1px;
}

.__5lbPL2fx .PCV2xUpe .__7iNBg0X3 .KTA4S7MT {
    display: flex;
    align-items: center;
    color: #fff;
}

.jCq5t8Ag {
    font-size: 18px;
}

.fXnpvOe5 {
    color: #eca671;
}

.T0YeNES7 {
    border-radius: 24px;
    margin: 0px auto 0;
    width: 1288px;

    position: relative;
}

.DlirJ1ib {
    /* position: absolute;
    width: 100%;
    top: 108px;
    display: flex;
    padding: 0 32px;
    box-sizing: border-box; */
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    /* 允许子元素换行 */
    padding: 0 12px;
    box-sizing: content-box;



}

.public_css {
    position: relative;
    top: 100px;
}

.T0YeNES7 .DlirJ1ib .__5tHOmji1:not(:last-child) {
    margin-right: 15px;
}

.T0YeNES7 .DlirJ1ib .__5tHOmji1 {
    width: calc(19%);
    padding: 30px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 24px;
    box-shadow: 0 0 1px 0 rgba(28, 31, 35, .16), 0 6px 32px 4px rgba(28, 31, 35, .08);
    background: #fffbf7;
    position: relative;
    transition: transform .2s ease-in-out;
    margin-bottom: 15px;
    /* 可选：在子元素之间添加垂直间距 */
}

.T0YeNES7 .DlirJ1ib .__5tHOmji1 .X20EtzrE {
    color: #1c1f23;
    font-weight: 600;
    font-size: 18px;
    margin-bottom: 8px;
}

.T0YeNES7 .DlirJ1ib .__5tHOmji1 .Ml_1CMnv {
    font-size: 12px;
    color: rgba(50, 42, 42, .65);
    padding-bottom: 20px;
    border-bottom: 1px solid hsla(29, 16%, 72%, .45);
}

.T0YeNES7 .DlirJ1ib .__5tHOmji1 .d1xY_zWD {
    margin-top: 24px;
    height: 200px;
    overflow-y: auto;
}


.T0YeNES7 .DlirJ1ib .__5tHOmji1 .d1xY_zWD .dOLnFV6B {
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    color: #73675d;

}

.T0YeNES7 .DlirJ1ib .__5tHOmji1 .d1xY_zWD .dOLnFV6B img {
    margin-right: 3px;
}

.T0YeNES7 .DlirJ1ib .__5tHOmji1 .P3IJ_Ps1 {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ffead8;
    background: linear-gradient(90deg, #fab173, #f74018);
    cursor: pointer;
    height: 42px;
    border-radius: 12px;
    margin: 10px 0;
    position: relative;
}

.eKPpmK85 {
    width: 1296px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 40px;
    color: #fff;

}

.fLE_iyzU header {
    color: #fff;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 30px;
    text-align: center;

}

.dQZ1bQM4 {
    font-size: 40px;
    font-weight: 500;

}

.eKPpmK85_content {
    color: #1a1a1a;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 30px;
    border-radius: 24px;
    background: #fff;
    padding: 20px;
}

.el-dialog__header {
    padding-bottom: 0px !important;
}

.el-dialog__headerbtn {
    z-index: 100000 !important;
    font-size: 25px !important;
}




.rgkLEA2W {

    min-height: 434px;
    display: flex;
    /* background-color: #fff;
    box-shadow: 0 6px 32px 4px rgba(28, 31, 35, .08), 0 0 1px 0 rgba(28, 31, 35, .16); */
}

.rgkLEA2W .e46WNgqp {
    text-align: center;
    border-right: 1px solid rgba(30, 32, 35, .1);
    padding: 0px 24px 0px 0;
    background: #1a1a1a;
    height: 100%;
    width: 209px;
    display: flex;
    flex-direction: column;
}

.rgkLEA2W .Kry8SuEM {
    color: #1c1f23;
    font-size: 16px;
    font-weight: 600;
    text-wrap: nowrap;
}

.rgkLEA2W .e46WNgqp .n6yPVLbf {
    margin: 77px auto 0;
    width: 160px;
    height: 160px;
}

.rgkLEA2W .e46WNgqp .n6yPVLbf img {
    width: 100%;
}

.rgkLEA2W .e46WNgqp .D1plM_Ix {
    margin-top: 12px;
    color: rgba(30, 32, 35, .65);
    font-size: 12px;
    white-space: nowrap;
}

.rgkLEA2WMSG {

    min-height: 434px;
    display: flex;
    /* background-color: #fff;
box-shadow: 0 6px 32px 4px rgba(28, 31, 35, .08), 0 0 1px 0 rgba(28, 31, 35, .16); */
}


.rgkLEA2WMSG .e46WNgqp {
    text-align: center;
    background: #fff;
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.rgkLEA2WMSG .Kry8SuEM {
    color: #1c1f23;
    font-size: 16px;
    font-weight: 600;
    text-wrap: nowrap;
}

.rgkLEA2WMSG .e46WNgqp .n6yPVLbf {
    margin: 25px auto 0;
    width: 160px;
    height: 160px;
}

.rgkLEA2WMSG .e46WNgqp .n6yPVLbf img {
    width: 100%;
}

.rgkLEA2WMSG .e46WNgqp .D1plM_Ix {
    margin-top: 12px;
    color: rgba(30, 32, 35, .65);
    font-size: 12px;
    white-space: nowrap;
}


.rgkLEA2WMSG .BUB79uwl {
    cursor: pointer;
    margin-top: auto;
    text-align: center;
}

.rgkLEA2WMSG .BUB79uwl .QaBLSkFR {
    padding-right: 12px;
    font-size: 17px;
}

.anticon {
    display: inline-block;
    color: inherit;
    font-style: normal;
    line-height: 0;
    text-align: center;
    text-transform: none;
    vertical-align: -.125em;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.rgkLEA2W .XTjN43Yt:nth-child(2) {
    width: 100%;
}

.rgkLEA2W .XkQsGOQO {
    width: 100%;
    padding: 0px 0 24px 0px;
    text-align: center;
    background: #1a1a1a;
}

.rgkLEA2W .XkQsGOQO1 {
    width: 100%;
    text-align: center;
}

.rgkLEA2W .Kry8SuEM {
    color: #1c1f23;
    font-size: 16px;
    font-weight: 600;
    text-wrap: nowrap;
}

.rgkLEA2W .XkQsGOQO .lMY5rscV {
    margin-top: 16px;
}

.M7LdnvD7 {
    margin-top: 16px;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    width: 100%;
}

.Bi65U_Zw {
    width: 100%;
    height: 42px;
    background: linear-gradient(90deg, #fab173, #f74018);
    border: none;
    color: #ffead8;
    border-radius: 12px;
}
</style>